<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13</title>
    <style>
        * {
            /* margin: 0; */
            padding: 0;
        }

        ul {
            width: 100px;
            height: 150px;
            background: #bfa;
            overflow: auto;
        }

        .news {
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="main"></div>

    <!-- 引入react核心库，引入对象：React -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM，引入对象：ReactDOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入对组件属性约束，引入对象：PropTypes -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">

        class Box extends React.Component {

            state = { newsList: [] }


            componentDidMount() {
                setInterval(() => {
                    const { newsList } = this.state
                    const news = '新闻' + (newsList.length + 1)
                    this.setState({
                        newsList: [news, ...newsList]
                    })
                }, 1000)
            }

            getSnapshotBeforeUpdate() {
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preProps, preState, height) {
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height
            }

            render() {
                return (
                    <div>
                        <ul ref="list">
                            {
                                this.state.newsList.map((v, i) => {
                                    return <li className="news" key={i}>{v}</li>
                                })
                            }
                        </ul>
                    </div>
                )
            }
        }

        ReactDOM.render(<Box />, document.getElementById('main'))
    </script>
</body>

</html>